<template>
  <div style="height: 100vh">
    <el-container>
      <el-header style="height: auto">
        <el-row type="flex" align="middle">
          <el-col :span="4">
            <el-image :src="src" style="height: 100px; width: 280px"></el-image>
          </el-col>
          <el-col :span="12" :offset="8">
            <el-input
                placeholder="请输入内容"
                v-model="selectData"
                clearable style="width: 500px">
            </el-input>
            <el-button type="primary" @click="select" >搜 索</el-button>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </el-header>
      <el-container>
        <el-main style="margin: 0; padding: 0;">
          <el-row>
            <el-col :offset="6" :span="12">
              <!-- 当我们到达底部时，便会触发loadPage函数-->
              <!-- 当disabled函数为true，便不会触发loadPage函数了-->
              <div v-infinite-scroll="loadPage"
                   infinite-scroll-disabled="disabled"
                   style="overflow:auto; height: 70vh">
                <!-- 遍历查询出的数据列表-->
                <el-card v-for="file in files" :key="file.id" style="text-align: left; height: 360px; margin-bottom: 20px ;">
                  <!--                  card头部-->
                  <div slot="header">
                    <span style="font-size: 24px">{{file.nickName}}</span>
                    <div style="float: right; margin-right: 50px">
                      下载量：{{file.downloadNum}}
                      <i class="el-icon-star-on" style="color:red" v-show="file.downloadNum > 5000"></i>
                    </div>
                  </div>
                  <!--                  card身体部-->
                  <div style="text-align: center">
                    <el-row>
                      <el-col :span="10">
                        <img :src="file.fileIcon" width="120px" height="120px">
                        <div>
                          版本信息：{{file.fileVersion}}
                        </div>
                        <div>
                          软件大小：{{file.fileSize}}
                        </div>
                      </el-col>
                      <el-col :span="14">
                        <div>软件详情：</div>
                        <div style="">
                          {{file.fileProfile}}
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <el-divider></el-divider>
                  <!--                底部-->
                  <el-row>
                    <el-col :span="20" style="border: 1px solid transparent">
                      <el-tag v-for="type in file.types" :key="type" style="margin-left: 15px">{{type}}</el-tag>
                    </el-col>
                    <el-col :span="4">
                      <el-link :href="file.fileUrl">
                        <el-button icon="el-icon-download" type="success" style="float: right">下载</el-button>
                      </el-link>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <div style="text-align: center; margin-bottom: 20px">
                <!-- 加载数据时出现提示-->
                <p v-if="loading">加载中...</p>
                <!-- 加载完全部内容就提示下面的话-->
                <p v-if="noMore">没有更多了</p>
              </div>
            </el-col>
          </el-row>
        </el-main>
        <el-footer style="margin: 0; padding: 0; text-align: center; background-color: #f5f5f5">
          <Footer />
        </el-footer>
      </el-container>
    </el-container>
    <template>
      <div>
        <el-backtop></el-backtop>
      </div>
    </template>
  </div>
</template>

<script>

import Footer from "@/components/Footer";
import Header from "@/components/Header";

export default {
  name: "FileInfo",
  components: {Footer, Header},
  data() {
    return {
      selectData: '',
      src: require('../assets/易下.png'),
      files: [],
      // 当前页
      pageNum: 1,
      // 页大小
      pageSize: 5,
      // 共几页
      pages: 0,
      loading: false,
    }
  },
  created() {
    // 从路由获取传递的参数
    this.getSelectData();
    // 执行查找操作
    this.select();
  },
  computed: {
    // 是否可以继续加载
    noMore () {
      // 当前页大于总页数时停止
      return this.pageNum > this.pages;
    },
    // 是否可以继续调用函数加载
    disabled () {
      // 当前在加载资源或者当前页大于中页数了都会关闭加载
      return this.loading || this.noMore
    }
  },
  methods: {
    getSelectData() {
      this.selectData = this.$route.params.selectData;
    },
    // 加载函数
    loadData() {
      this.request.get("/u/pageBySelectData", {
        params: {
          // 页数
          pageNum: this.pageNum,
          // 页大小
          pageSize: this.pageSize,
          // 查询关键字
          selectData: this.selectData
        }
      }).then(res => {
        if (res.code == 200) {
          // 将查询出来的列表与之前列表合并
          this.files = this.files.concat(res.data.records);
          // 存储总页数
          this.pages = res.data.pages;
        }
        // 关闭加载
        this.loading = false;
      });
    },
    select() {
      // 查询重置页数
      this.pageNum = 1;
      this.request.get("/u/pageBySelectData", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          selectData: this.selectData
        }
      }).then(res => {
        if (res.code == 200) {
          this.files = this.files= res.data.records;
          this.pages = res.data.pages;
        }
        // 关闭加载
        this.loading = false;
      });
    },
    loadPage() {
      // 开启加载
      this.loading = true;
      // 定时两秒后
      setTimeout(() => {
        // 页数+1
        this.pageNum += 1;
        // 加载
        this.loadData();
      }, 2000)
    },
  },
}
</script>

<style scoped>
</style>
